<template>
  <div id="app">
    <h1 style="text-align: center; padding: 20px;">Vue3 Form Making - Demo</h1>
    <div style="padding: 20px;">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="表单设计器" name="designer">
          <div style="height: 700px;">
            <making-form
              ref="makingForm"
              preview
              generate-json
              generate-code
              clearable
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="表单渲染器" name="generator">
          <el-card>
            <template #header>
              <div style="display: flex; justify-content: space-between; align-items: center;">
                <span>表单渲染示例</span>
                <div>
                  <el-button type="primary" @click="handleGetData">获取数据</el-button>
                  <el-button @click="handleReset">重置</el-button>
                </div>
              </div>
            </template>
            <generate-form :data="formData" ref="generateForm" v-model:value="formValue" />
            <el-divider />
            <div>
              <h3>表单数据：</h3>
              <pre>{{ JSON.stringify(formValue, null, 2) }}</pre>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import MakingForm from './components/MakingForm/index.vue'
import GenerateForm from './components/GenerateForm/index.vue'

const activeTab = ref('designer')
const makingForm = ref(null)
const generateForm = ref(null)
const formValue = ref({})

const formData = ref({
  list: [
    {
      type: 'input',
      label: '姓名',
      icon: 'el-icon-edit',
      options: {
        width: '100%',
        defaultValue: '',
        placeholder: '请输入姓名',
        clearable: true,
        disabled: false,
        required: true
      },
      model: 'name',
      key: 'name',
      rules: []
    },
    {
      type: 'number',
      label: '年龄',
      icon: 'el-icon-plus',
      options: {
        width: '100%',
        defaultValue: 0,
        min: 0,
        max: 150,
        step: 1,
        disabled: false,
        required: true
      },
      model: 'age',
      key: 'age',
      rules: []
    },
    {
      type: 'radio',
      label: '性别',
      icon: 'el-icon-success',
      options: {
        defaultValue: '男',
        disabled: false,
        required: true,
        options: [
          { value: '男', label: '男' },
          { value: '女', label: '女' }
        ]
      },
      model: 'gender',
      key: 'gender',
      rules: []
    },
    {
      type: 'select',
      label: '城市',
      icon: 'el-icon-arrow-down',
      options: {
        width: '100%',
        defaultValue: '',
        placeholder: '请选择城市',
        clearable: true,
        multiple: false,
        disabled: false,
        required: false,
        options: [
          { value: '北京', label: '北京' },
          { value: '上海', label: '上海' },
          { value: '广州', label: '广州' },
          { value: '深圳', label: '深圳' }
        ]
      },
      model: 'city',
      key: 'city',
      rules: []
    },
    {
      type: 'date',
      label: '出生日期',
      icon: 'el-icon-date',
      options: {
        width: '100%',
        defaultValue: '',
        placeholder: '请选择日期',
        clearable: true,
        disabled: false,
        required: false,
        format: 'YYYY-MM-DD'
      },
      model: 'birthday',
      key: 'birthday',
      rules: []
    },
    {
      type: 'textarea',
      label: '个人简介',
      icon: 'el-icon-edit',
      options: {
        width: '100%',
        defaultValue: '',
        placeholder: '请输入个人简介',
        clearable: false,
        maxLength: 200,
        rows: 4,
        disabled: false,
        required: false
      },
      model: 'bio',
      key: 'bio',
      rules: []
    }
  ],
  config: {
    labelWidth: '100px',
    labelPosition: 'right',
    size: 'default'
  }
})

const handleGetData = () => {
  generateForm.value.getData().then(data => {
    console.log('表单数据:', data)
    ElMessage.success('表单验证通过，数据已打印到控制台')
  }).catch(() => {
    ElMessage.error('表单验证失败')
  })
}

const handleReset = () => {
  generateForm.value.reset()
  formValue.value = {}
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  background: #f0f2f5;
}

pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow: auto;
}
</style>